<template>
  <a-card size="small" style="margin-bottom: 10px" :bordered="false">
    <a-flex justify="space-between" align="center">
      <a-flex>
        <span style="font-weight: bold">104从站状态：</span>
        <a-tag :color="iecStatus.isConnected?'green':'red'">{{ iecStatus.isConnected ? '服务已启动' : '异常' }}
        </a-tag>
        <!--        <span style="margin-left: 15px;font-weight: bold">最近响应时间：{{ masterStatus.lastTime }}</span>-->
      </a-flex>
      <a-button type="primary" ghost @click="loadData">刷新</a-button>
    </a-flex>

  </a-card>
  <a-tabs v-model:activeKey="activeKey" tab-position="left" type="card" size="large">
    <a-tab-pane :key="key" :tab="`从站-【${key}】`" v-for="(data,key,index) in forwardData">
      <a-table :columns="columns" :dataSource="data.filter(item => (item.address104 != null)||item.addressInfo104!=null).sort((a,b)=>a.address104-b.address104)" :pagination="false"
               :scroll="{ y: yScroll }"></a-table>
    </a-tab-pane>
  </a-tabs>
</template>
<script setup>

import {ref} from "vue";
import {baseRequest} from "@/utils/request.js";

const activeKey = ref(null)
const iecStatus = ref({})
const forwardData = ref([])
const yScroll = `calc(100vh - ${220}px)`
const columns = [
  {
    title: '测点名称',
    dataIndex: 'name',
  },
  {
    title: '寄存器地址',
    dataIndex: 'address',
  },
  {
    title: '转发值',
    dataIndex: 'forwardValue',
  },
  {
    title: '单位',
    dataIndex: 'unit',
  },
  {
    title: '104寄存器地址',
    dataIndex: 'address104',
  }
]

const loadData = () => {
  baseRequest("/iec/status", {}).then(res => {
    iecStatus.value = res.data.data
  })

  baseRequest("/rule_value", {}).then(res => {
    forwardData.value = res.data.data
    activeKey.value = forwardData.value[0]
  })
}
loadData()

</script>

<style scoped>

</style>
